<script setup>
import {
  getPermListApi,
  addPermApi,
  getPermApi,
  modifyPermApi,
  deletePermApi
} from '@/api/permission'
import { transList2Tree } from '@/utils/date-handle'
import { onMounted, ref } from 'vue'

// 新增/编辑权限对话框title
const title = ref('')
// 表格数据
const tableData = ref([])
// 获取权限列表，改为树形结构
const setPermList = async () => {
  const res = await getPermListApi()
  tableData.value = transList2Tree(res.data)
}

const showPermVisible = ref(false)
// 新增/编辑权限DOM、表单
const addPermForm = ref(null)
const permFormData = ref({
  name: '',
  code: '',
  description: '',
  type: '',
  pid: ''
})
const rules = ref({
  name: [{ required: true, message: '请输入权限名', trigger: 'blur' }],
  code: [{ required: true, message: '请输入权限代码', trigger: 'blur' }],
  description: [{ required: true, message: '请输入权限描述', trigger: 'blur' }]
})

// 添加权限按钮
const openAddRoot = () => {
  title.value = '添加权限'
  showPermVisible.value = true
  permFormData.value.type = 1
  permFormData.value.pid = 0
}

// 取消添加按钮
const cancelAdd = () => {
  showPermVisible.value = false
  addPermForm.value.resetFields()
  permFormData.value.id = ''
}

// 添加/编辑权限
const addPerm = () => {
  addPermForm.value.validate(async (isOk) => {
    if (isOk) {
      // 编辑权限
      if (permFormData.value.id) {
        await modifyPermApi(permFormData.value)
        ElMessage.success('修改成功')
      } else {
        await addPermApi(permFormData.value)
        ElMessage.success('添加成功')
      }
      cancelAdd()
      setPermList()
    }
  })
}

// 添加子权限按钮
const openAddChild = (row) => {
  showPermVisible.value = true
  permFormData.value.type = 2
  permFormData.value.pid = row.id
}

// 编辑按钮
const openEdit = async (row) => {
  title.value = '编辑权限'
  showPermVisible.value = true
  // 回显数据
  const res = await getPermApi(row.id)
  permFormData.value = res.data
}

// 删除权限
const deletePerm = async (id) => {
  await deletePermApi(id)
  ElMessage.success('删除成功')
  setPermList()
}

onMounted(() => setPermList())
</script>

<template>
  <div class="container">
    <div class="app-container">
      <div style="padding: 15px">
        <el-button
          type="primary"
          size="small"
          style="margin-bottom: 15px; position: relative; left: -15px"
          @click="openAddRoot"
          >添加权限</el-button
        >
        <!-- 添加权限对话框 -->
        <el-dialog
          :title="title"
          v-model="showPermVisible"
          width="450px"
          @close="cancelAdd"
        >
          <el-form
            ref="addPermForm"
            :model="permFormData"
            :rules="rules"
            label-position="right"
            label-width="80px"
          >
            <el-form-item label="名称" prop="name">
              <el-input v-model="permFormData.name" />
            </el-form-item>
            <el-form-item label="标识" prop="code">
              <el-input v-model="permFormData.code" />
            </el-form-item>
            <el-form-item label="描述" prop="description">
              <el-input type="textarea" v-model="permFormData.description" />
            </el-form-item>
          </el-form>
          <template #footer>
            <el-row type="flex" justify="center">
              <el-button size="small" type="primary" @click="addPerm"
                >确定</el-button
              >
              <el-button size="small" @click="cancelAdd">取消</el-button>
            </el-row>
          </template>
        </el-dialog>
        <el-table row-key="id" :data="tableData" default-expand-all>
          >
          <el-table-column width="300px" label="名称" prop="name" />
          <el-table-column width="300px" label="标识" prop="code" />
          <el-table-column width="300px" label="描述" prop="description" />
          <el-table-column width="150px" label="操作">
            <template #default="{ row }">
              <el-row>
                <el-col :span="8">
                  <el-link
                    type="primary"
                    v-if="row.pid === 0"
                    @click.prevent="openAddChild(row)"
                  >
                    添加
                  </el-link>
                </el-col>
                <el-col :span="8"
                  ><el-link type="primary" @click.prevent="openEdit(row)">
                    编辑
                  </el-link>
                </el-col>
                <el-col :span="8">
                  <el-popconfirm
                    title="确定删除吗？"
                    @confirm="deletePerm(row.id)"
                  >
                    <template #reference>
                      <el-link type="primary">删除</el-link>
                    </template>
                  </el-popconfirm>
                </el-col>
              </el-row>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<style scoped>
.container {
  background-color: #fff;
  min-height: 650px;
}
.app-container {
  padding-left: 20px;
}
</style>
